<template>
  <div class="mainBody flex_cb">
    <div style="height:48%" class="flex_b">
      <div class="timeInfo">
        <p>{{date}}</p>
        <p>{{time}}</p>
        <p>{{weekEng}} | {{weekChi}}</p>
      </div>
      <div class="tabList">
        <ul class="flex_w">
          <li v-for="item in shortlist" :key="item.id" class="flex_cenc">
            <div class="imgBox flex_cen">
              <img src="../../static/images/tabIcon.png" alt="" @click="toBoard(item.id)">
            </div>
            <span class="hiddenE">{{item.SpeName}}</span>
          </li>
          <li class="addBtn flex_cenc" v-if="shortlistId0.length != 8">
            <div class="imgBox flex_cen">
              <img src="../../static/images/add.png" alt="" @click="showPopUp = true;">
            </div>
            <span class="hiddenE" @click="showPopUp = true;">点击增加新报表</span>
          </li>
        </ul>
      </div>
    </div>
    <div style="height:48%" class="flex_b">
      <v-warnList :list="equipWarnList" :title="warnTitle[0]"></v-warnList>
      <v-warnList :list="priceWarnList" :title="warnTitle[1]"></v-warnList>
      <v-warnList :list="planWarnList" :title="warnTitle[2]"></v-warnList>
    </div>

    <!-- 弹窗 -->
    <el-dialog :visible.sync="showPopUp" :close-on-click-modal="false"
      width="35%" center @close='closePopUp' class="PopUpBox">
      <el-checkbox-group
        v-model="shortlistId" :max="8">
        <el-checkbox v-for="item in allList" :label="item.id" :key="item.id">{{item.SpeName}}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <div class="btnBox flex_a">
          <a href="javascript:;" @click="showPopUp = false">取消</a>
          <a href="javascript:;" @click="PopUpFinish">确认</a>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import WarnList from './public/WarnList.vue'
  import axios from 'axios'
  import qs from 'qs'
  import { getCookie } from '../cookieUtil/cookieUtil';

  export default {
    name: 'Home',
    components: {
      'v-warnList': WarnList
    },

    data () {
      return {
        userId: '',                                 //用户ID
        date: '',                                   //日期
        time: '',                                   //时间
        weekEng: '',                                //周（英文）
        weekChi: '',                                //周（中文）
        timeOut: '',                                //计时器
        showPopUp: false,                           //弹窗
        allList: [],                                //所有看板（请求获得）
        shortlist: [],                              //快捷看板                 
        shortlistId: ['1', '2'],                    //选中的报表
        shortlistId0: ['1','2'],                    //取消前选中的id（副本）
        warnTitle:['设备预警','价格预警','进度预警'], //预警名称
        equipWarnList: [                            //设备预警(请求获取)
          {id: '001', time: '2018/11/20', content: '撒即可打开健身房和会计'},
        ],
        priceWarnList: [                            //价格预警（请求获取）
          {id: '001', time: '2018/11/20', content: '撒即可打开健身房和会计'},
        ],
        planWarnList: [                             //进度预警（请求获取）
          {id: '001', time: '2018/11/20', content: '撒即可打开健身房和会计'},
        ]
      }
    },

    created(){
      let that = this;
      that.setTime();
      
      that.timeOut = setInterval(function(){
        that.setTime()
      },10*1000);

      this.userId = { id: getCookie('userId') };

      that.getallList();                         //接口确定后解开
      // that.getshortlistId()
      // that.getWarn();
    },

    destroyed () {
      clearInterval(this.timeOut)
    },

    methods: {
      //时间设置
      setTime () {
        let now = new Date();
        let nowDay = now.getDate();
        let nowMonth = now.getMonth() + 1;
        let nowYear = now.getYear();
        let hours = now.getHours();
        let min = now.getMinutes();
        nowYear += (nowYear < 2000) ? 1900 : 0;

        if (nowMonth < 10) {
          nowMonth = "0" + nowMonth;
        }
        if (nowDay < 10) {
          nowDay = "0" + nowDay;
        }
        if (hours < 10) {
          hours = "0" + hours;
        }
        if (min < 10) {
          min = "0" + min;
        }

        let weekEng = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");  
        let weekChi = new Array("日", "一", "二", "三", "四", "五", "六");  
        let week = new Date().getDay();

        this.date = nowYear + ' 年 ' + nowMonth + ' 月 ' + nowDay + ' 日',
        this.time = hours + ':' + min,
        this.weekEng = weekEng[week],
        this.weekChi = "星期"+ weekChi[week]
      },

      //获取所有报表
      getallList () {
        let that = this;
        let data = {
              id: getCookie('userId'),
              module: 0,
              search: '',
            };
        axios.post(this.host+'/WebApi/SelectBbRpt',
          qs.stringify({
            ...data,
          }))
        .then(response => {
          // console.log(response.data)
          var item = ''
          for(let i = 0; i < response.data.length; i++) {
            response.data[i].id = response.data[i].id.toString()
          }
          that.allList = response.data;
          console.log(that.allList)
        })
        .catch(error=>{
          console.log(error);
        });
      },

      //获取快捷报表的id
      getshortlistId () {
        let that = this;
        axios.post('',
          qs.stringify({
            ...that.userId,
          }))
        .then(res=>{
          // console.log(res.data);
          that.shortlistId = res.data.toString();
          that.shortlistId0 = res.data.toString();
          that.shortlistId.map(item =>
            that.shortlist.push(
              that.allList.filter(itemAll => itemAll.id == item)[0]
            )
          )
        })
        .catch(error=>{
          console.log(error);
        });
      },

      //获取预警信息
      getWarn () {
        let that = this;
        axios.post('',
          qs.stringify({
            ...that.userId,
        }))
        .then(res=>{
          // console.log(res.data);
          that.equipWarnList = res.data[0];
          that.priceWarnList = res.data[1];
          that.planWarnList = res.data[2];
        })
        .catch(error=>{
          console.log(error);
        });
      },

      //弹窗确定
      PopUpFinish () {
        if (this.shortlistId.length > 8) {
          that.$message.error('快捷报表最多只能设置8个！');
        }
        let that = this;
        that.shortlist = [];
        that.shortlistId.map(item =>
          that.shortlist.push(
            that.allList.filter(itemAll => itemAll.id == item)[0]
          )
        )
        that.shortlistId0 = that.shortlistId;
        that.showPopUp = false;
        let arr = [];
        that.shortlistId.map(item => {
          arr.push(Number(item))
        });
        let data = { 
              id: getCookie('userId'),
              shortlistId: arr
            }
        axios.post('',
          qs.stringify({
            ...data,
          }))
        .then(function (response) {
          console.log(response.data)
          that.$message({
            message: '保存成功！',
            type: 'success',
            duration: 1000
          });
        })
        .catch(function (error) {
          console.log(error);
          that.$message.error('保存失败')
        });
      },

      //弹窗取消
      closePopUp () {
        this.shortlistId = this.shortlistId0;
      },

      //快捷跳转
      toBoard (id) {
        let moduleId = this.allList.filter(item => item.id == id)[0].moduleId.toString();
        this.$emit("toBoard", id, moduleId);
      }
    }
  }
</script>


<style scoped>
  @font-face {
    font-family: "RetroBoldStd";
    src: url("../../static/fonts/RetroBoldStd.woff2") format("woff2"),
      url("../../static/fonts/RetroBoldStd.woff") format("woff"),
      url("../../static/fonts/RetroBoldStd.ttf") format("truetype"),
      url("../../static/fonts/RetroBoldStd.eot") format("embedded-opentype"),
      url("../../static/fonts/RetroBoldStd.svg") format("svg");
  }
  .timeInfo{
    width: 40%;
    height: 100%;
    color: #7ecef4;
    border-radius: 8px;
    padding: 1%;
    box-sizing: border-box;
    background: #29405a;
    /* Old browsers */
    background: -moz-linear-gradient(150deg, #1f2631 0%, #0c161d 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #1f2631), color-stop(100%, #0c161d));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(150deg, #1f2631 0%, #0c161d 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(150deg, #1f2631 0%, #0c161d 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(150deg, #1f2631 0%, #0c161d 100%);
    /* IE10+ */
    background: linear-gradient(150deg, #1f2631 0%, #0c161d 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1f2631, endColorstr=#0c161d, GradientType=1);
    /* IE6-9 fallback on horizontal gradient */  
  }
  .timeInfo p{
    text-align: center;
    font-size: 2.2vw;
    margin: 0
  }
  .timeInfo p:nth-child(2){
    font-family: RetroBoldStd;
    font-size: 10vw;
    color: #00ffff;
    line-height: 11vw;
  }
  .tabList{
    width: 55%;
    height: 100%;
  }
  .tabList ul{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .tabList li{
    width: 25%;
  }
  .tabList .imgBox{
    width: 80px;
    height: 80px;
    margin-bottom: 5px;
    border-radius: 45px;
    background-color: #27384e;
  }
  .tabList img{
    width: 50px;
    height: 50px;
    cursor: pointer;
  }
  .tabList span{
    width: 80%;
    display: inline-block;
    text-align: center;
    font-size: 15px;
    color: #a0a0a0;
    cursor: pointer;
  }
  .addBtn img{
    width: 40px;
    height: 40px;
  }
</style>

